<template>
  <div>
    <!-- 头部商品安全溯源 -->
    <template>
      <view class="banner-top">
        <view class="sources"></view>
        <text class="text-source">商品安全溯源</text>
        <view class="circle-one circle"></view>
        <view class="circle-two circle"></view>
        <view class="circle-three circle"></view>
      </view>
    </template>

    <!-- 商品信息 -->
    <div class="box">
      <div class="shop row_start">
        <image :src="shopInfo.pic"></image>
        <div class="shop-info column_evenly">
          <span class="shop-info-title">{{ shopInfo.name }}</span>
          <span class="shop-info-menu">{{ shopInfo.unit }}</span>
        </div>
      </div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in shop_basic_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span class="shopBasic-span">{{ shopInfo[item.value] }}</span>
      </div>

      <div class="line"></div>
      <div class="price">配送金额: ￥{{ sumNum }}</div>
    </div>

    <!-- 查询信息 -->
    <div class="box">
      <span class="box-title">查询信息</span>
      <div class="box-line"></div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in query_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span class="shopBasic-span">{{ shopInfo[item.value] }}</span>
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="box">
      <span class="box-title">订单信息</span>
      <div class="box-line"></div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in order_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span class="shopBasic-span">{{ shopInfo[item.value] }}</span>
      </div>
    </div>

    <!-- 供应商信息 -->
    <div class="box">
      <div class="box-auxiliary row_between">
        <span class="box-title">供应商信息</span>
        <!-- <div class="box-auxiliary-right row_start" @click="openzizhi">
          <span>查看资质</span>
          <uni-icons type="forward" size="18"></uni-icons>
        </div> -->
      </div>
      <div class="box-line"></div>
      <div
        class="shopBasic"
        :class="item.type == 'img' ? 'column_start' : 'row_between'"
        v-for="(item, index) in supplier_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span class="shopBasic-span" v-if="item.type != 'img'">{{
          shopInfo[item.value]
        }}</span>
        <div class="shopBasic-imgs" v-else>
          <div class="shopBasic row_between">
            <!-- <rich-text :nodes="datas"></rich-text> -->
          </div>
        </div>
        <!-- :class="item.type == 'img' ? 'shopBasic-mark' : 'shopBasic-normal'" -->
      </div>
    </div>

    <!-- 检测信息 -->
    <!-- <div class="box">
      <span class="box-title">检测信息</span>
      <div class="box-line"></div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in detection_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span
          class="shopBasic-span"
          :class="item.type == 'img' ? 'shopBasic-mark' : 'shopBasic-normal'"
          >{{ shopInfo[item.value] }}</span
        >
      </div>
    </div> -->

    <!-- 溯源信息 -->
    <div class="box">
      <div class="box-auxiliary row_between">
        <span class="box-auxiliary-left">溯源信息</span>
        <div class="box-auxiliary-right row_start" @click="quality">
          <span>质检报告</span>
          <uni-icons type="forward" size="18"></uni-icons>
        </div>
      </div>
      <div class="box-line"></div>
      <div class="shopBasic">
        <!-- <uni-steps
          :options="list2"
          active-color="#007AFF"
          :active="active"
          direction="column"
        /> -->
        <test :id="id"></test>
      </div>
    </div>

    <!-- 留样视频 -->
    <div class="box">
      <span class="box-title">留样视频</span>
      <div class="box-line"></div>
    </div>
    <view class="videos">
      <view class="preview" id="video-container"></view>
    </view>

    <!-- 二级供应商资质 -->
    <div class="box" style="margin-bottom: 20rpx" v-if="shopInfo.names">
      <div class="box-auxiliary row_between">
        <span class="box-auxiliary-left">二级供应商资质</span>
        <div
          class="box-auxiliary-right row_start"
          @click="openerzizhi(shopInfo.pics)"
        >
          <span>查看资质</span>
          <uni-icons type="forward" size="18"></uni-icons>
        </div>
      </div>
      <div class="box-line"></div>
      <div
        class="shopBasic row_between"
        v-for="(item, index) in er_supplier_info"
        :key="index"
      >
        <span class="shopBasic-title">{{ item.name }}</span>
        <span
          class="shopBasic-span"
          :class="item.type == 'img' ? 'shopBasic-mark' : 'shopBasic-normal'"
          >{{ shopInfo[item.value] }}</span
        >
      </div>
    </div>

    <div class="zhichi">
      技术支持：
      <a href="http://www.caidj.cn">菜东家</a>
    </div>

    <view class="" v-if="loading">
      <loading></loading>
    </view>
    <view class="" v-if="!show_content">
      <start
        :start_loading="start_loading"
        :pic="shopInfo.pic"
        @getStartData="getStartData"
      ></start>
    </view>
  </div>
</template>

<script>
import parseHtml from "@/static/js/parseHtml.js";
import start from "./start";
import loading from "./components/loading";
import test from "./test.vue";
import { $https } from "@/static/js/request.js";
import EZUIKit from "ezuikit-js";
let player = null;
const app = getApp().globalData;
export default {
  components: {
    start,
    loading,
    test,
  },
  data() {
    return {
      webViewUrl: null,
      url: "./components/index.html",
      data: {},
      datas: {},
      show_content: false,
      start_loading: true,
      loading: false, //加载loading
      pic: "",
      id: 10298142,

      // 商品基本信息
      shop_basic_info: [
        // {
        //   name: "商品描述",
        //   value: "",
        // },
        {
          name: "配送数量",
          value: "sort_num",
        },
        {
          name: "配送单价",
          value: "sort_price",
        },
      ],

      // 查询信息
      query_info: [
        {
          name: "溯源编码",
          value: "trace_code",
        },
        {
          name: "当前查询次数",
          value: "query_count",
        },
        {
          name: "首次查询时间",
          value: "first_query_time",
        },
      ],

      // 订单信息
      order_info: [
        {
          name: "下单客户",
          value: "nickname",
        },
        {
          name: "下单数量",
          value: "order_num",
        },
        {
          name: "发货数量",
          value: "collected_num",
        },
        {
          name: "归属单号",
          value: "order_sn",
        },
        {
          name: "退货数量",
          value: "return_num",
        },
      ],

      // 供应商信息
      supplier_info: [
        {
          name: "供应商资质",
          value: "company_qualification",
          type: "img",
        },
        {
          name: "供应商名称",
          value: "company_name",
        },
        {
          name: "联系地址",
          value: "company_address",
        },
      ],

      // 检测信息
      detection_info: [
        {
          name: "检测报告图片",
          value: "",
          type: "img",
        },
        {
          name: "检测日期",
          value: "",
        },
        {
          name: "送检机构",
          value: "",
        },
        {
          name: "检测机构",
          value: "",
        },
        {
          name: "检测员",
          value: "",
        },
      ],
      active: 1,

      list2: [
        {
          title: "买家下单",
          desc: "2018-11-11",
        },
        {
          title: "卖家发货",
          desc: "2018-11-12",
        },
        {
          title: "买家签收",
          desc: "2018-11-13",
        },
        {
          title: "交易完成",
          desc: "2018-11-14",
        },
      ],

      // 二级供应商信息
      er_supplier_info: [
        // {
        //   name: "供应商资质",
        //   value: "",
        //   type: "img",
        // },
        {
          name: "供应商名称",
          value: "names",
        },
        // {
        //   name: "联系地址",
        //   value: "",
        // },
      ],

      shopInfo: {
        name: null,
        company_name: null,
        company_qualification: null,
        company_address: null,
        pic: null,
        unit: null,
        sort_num: 0,
        sort_price: 0,
        trace_code: null,
        query_count: null,
        first_query_time: null,
        nickname: null,
        order_num: null,
        collected_num: null,
        order_sn: null,
        return_num: null,
        pics: null,
        names: null,
        company_yingshi: null,
        token: null,
      },
    };
  },
  mounted() {
    this.getInfoMation();
  },
  computed: {
    sumNum() {
      let sum =
        Number(this.shopInfo.sort_num) * Number(this.shopInfo.sort_price);
      return sum;
    },
  },
  onLoad(options) {
    if (app.sourceShowStartPage) {
      this.show_content = false;
      this.start_loading = true;
    } else {
      this.show_content = true;
      this.loading = true;
      this.start_loading = false;
    }
    if (options.id) {
      uni.setStorageSync("sourceId", options.id);
      this.id = options.id;
    }
    this.start_loading = false;
  },
  methods: {
    initPlayer() {
      let that = this;
      const { windowWidth, windowHeight } = uni.getSystemInfoSync();
      player = new EZUIKit.EZUIKitPlayer({
        id: "video-container", // 视频容器ID
        accessToken: that.shopInfo.token,
        url: that.shopInfo.company_yingshi,
        // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
        // template: "simple",
        // plugin: ['talk'], // 加载插件，talk-对讲
        width: windowWidth,
        height: (windowWidth * 2) / 3,
        header: ["capturePicture"],
        audio: 0,
        footer: ["broadcast", "hd", "fullScreen"],
      });
      window.player = player;
      window.player.stop();
      window.player.play();
    },
    play() {
      // player.play();
      var playPromise = player.play();
      playPromise.then((data) => {
        console.log("promise 获取 数据", data);
      });
    },
    getData(id) {
      return new Promise((resolve, reject) => {
        $https(
          "GETN",
          "getTrace",
          {
            id,
          },
          (res) => {
            if (res.data.errcode == 0) {
              resolve(res.data.data);
            } else {
              reject(res.errmsg);
            }
          },
          true
        );
      });
    },
    getDatas(id) {
      return new Promise((resolve, reject) => {
        $https(
          "GETN",
          "traceResult",
          {
            order_list_id: id,
          },
          (res) => {
            if (res.data.errcode == 0) {
              resolve(res.data.data);
            } else {
              reject(res.errmsg);
            }
          },
          true
        );
      });
    },
    getraceDetail(id) {
      return new Promise((resolve, reject) => {
        $https(
          "GETN",
          "traceDetail",
          {
            order_list_id: id,
          },
          (res) => {
            if (res.data.errcode == 0) {
              resolve(res.data.data);
            } else {
              reject(res.errmsg);
            }
          },
          true
        );
      });
    },
    getPic() {
      return new Promise((resolve, reject) => {
        $https(
          "GETN",
          "companyQualification",
          {},
          (res) => {
            if (res.data.errcode == 0) {
              resolve(res.data.data);
            } else {
              reject(res.errmsg);
            }
          },
          true
        );
      });
    },
    quality() {
      uni.navigateTo({
        url: `./report?id=${this.id}`,
      });
    },
    getInfoMation() {
      let data = this.getData(this.id);
      let datas = this.getDatas(this.id);
      // let detail = this.getraceDetail();
      let picList = this.getPic(this.id);
      Promise.all([datas, picList, data])
        .then((res) => {
          this.shopInfo.pic = res[0].pic;
          this.shopInfo.name = res[0].name;
          this.shopInfo.sort_num = res[0].sort_num;
          this.shopInfo.sort_price = res[0].sort_price;

          this.shopInfo.nickname = res[2].order_info.nickname;
          this.shopInfo.order_num = res[2].order_info.order_num;
          this.shopInfo.collected_num = res[2].order_info.collected_num;
          this.shopInfo.order_sn = res[2].order_info.order_sn;
          this.shopInfo.return_num = res[2].order_info.return_num;

          this.shopInfo.trace_code = res[2].order_trace.trace_code;
          this.shopInfo.query_count = res[2].order_trace.query_count;
          this.shopInfo.first_query_time = res[2].order_trace.first_query_time;
          this.shopInfo.names = res[2].son_company
            ? res[2].son_company.name
            : null;
          this.shopInfo.pics = res[2].son_company
            ? res[2].son_company.pics
            : null;
          this.shopInfo.company_name = res[2].company_info.company_name;
          this.shopInfo.company_address = res[2].company_info.company_address;
          this.shopInfo.company_yingshi = res[2].company_info.company_yingshi;
          this.shopInfo.token = res[2].company_info.token;
          let result = res[2].company_info.company_qualification;
          let dist = null;
          let infos = null;
          if (result) {
            dist = result.replace(/\\\'/g, "");
            infos = this.formatRichText(dist);
            this.datas = parseHtml(infos);
            this.datas[0].children = this.datas[0].children.filter((value) => {
              return value.name == "img";
            });
          }

          this.$nextTick(() => {
            console.log(window.EZUIKit);
            if (typeof window.EZUIKit !== "undefined") {
              this.initPlayer();
            } else {
              // 动态引入较大类库避免影响页面展示
              const script = document.createElement("script");
              // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
              script.src = "static/ezuikit.js";
              script.onload = this.initPlayer.bind(this);
              document.head.appendChild(script);
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="width:29%;float: left;height:auto;display:block;margin-top:0;margin-bottom:0;padding:5px"'
      );
      return newContent;
    },
    getStartData(data) {
      if (data.show_loading == false) {
        this.show_content = true;
      }
    },
    openerzizhi(url) {
      let imgsArray = [];
      imgsArray[0] = url;
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      });
    },
  },
};
</script>


<style lang="scss" scoped>
page {
  background: #eff9f8;
  padding-bottom: 1rpx;
  font-size: 26rpx;
}

.banner-top {
  position: relative;
  width: 750rpx;
  height: 314rpx;
  background: url(@/static/image/suyuan1.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 9;
  margin: 0 auto;

  .sources {
    width: 164rpx;
    height: 194rpx;
    background: url(@/static/image/suyuan.png) no-repeat;
    background-size: 100% 100%;
    margin-left: 74rpx;
    margin-right: 84rpx;
  }

  .text-source {
    font-size: 52rpx;
    color: #ffffff;
    padding-bottom: 30rpx;
  }

  .circle-one {
    top: 0;
    left: 0;
    width: 26rpx;
    height: 26rpx;
  }

  .circle-two {
    top: 20rpx;
    left: 254rpx;
    width: 46rpx;
    height: 46rpx;
  }

  .circle-three {
    top: 230rpx;
    left: 382rpx;
    width: 78rpx;
    height: 78rpx;
  }

  .circle {
    position: absolute;
    background-color: #6ccea1;
    border-radius: 100%;
  }
}

.box {
  width: 654rpx;
  margin: 24rpx 24rpx 0 24rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 24rpx;

  &-title {
    font-size: 32rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  &-auxiliary {
    align-items: center;

    &-left {
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 600;
      color: #333333;
    }

    &-right {
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      align-items: center;
    }
  }

  &-line {
    border-bottom: 1rpx solid #eeeeee;
    margin-top: 24rpx;
  }

  .shop {
    align-items: center;

    image {
      min-width: 138rpx;
      width: 138rpx;
      height: 186rpx;
      border: 1rpx solid #eeeeee;
    }

    &-info {
      height: 186rpx;
      margin-left: 24rpx;
      justify-content: space-between !important;

      &-title {
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 600;
        color: #333333;
      }

      &-menu {
        font-size: 32rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }

  .shopBasic {
    margin-top: 20rpx;
    overflow: auto;

    &-title {
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    &-span {
      width: 454rpx;
      text-align: right;
      font-size: 26rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
    }

    &-mark {
      color: #21be73;
    }

    &-normal {
      color: #333333;
    }

    &-img {
      width: 450rpx;
      height: 300rpx;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-imgs {
      width: 100%;
      height: auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .line {
    border-bottom: 1rpx solid #eeeeee;
    margin-top: 28rpx;
  }

  .price {
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-top: 32rpx;
    text-align: right;
  }
}

.status-btn {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 92rpx;
  margin: 30rpx;
  background-color: #007aff;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  padding: 15px;
  flex-direction: row;
}

uni-video {
  width: 100%;
}

.zhichi {
  width: 100%;
  text-align: center;
  margin: 20rpx 0;
  font-size: 24rpx;
}

.videos {
  width: 100%;
  // /deep/#video-container-wrap {
  //   width: 600rpx !important;
  //   #video-container {
  //     width: 100% !important;
  //   }
  // }
}
</style>
